<template>
  <div id="app">
    <!-- 左边配置项组件 -->
    <div class="options-wrapper">
      <div class="options">
        <div :class="{ option: true, active: showEidtList === 0 }" @click="changeOption(0)">配置项</div>
        <div :class="{ 'layer-option': true, option: true, active: showEidtList === 1 }" @click="changeOption(1)">
          图层管理
        </div>
        <div :class="{ option: true, active: showEidtList === 2 }" @click="changeOption(2)">边框</div>
      </div>
      <div class="sider" v-if="showEidtList === 0">
        <config-list draggable="true" :list="list" @dragstart="onStart"> </config-list>
      </div>
      <div class="layer" v-else-if="showEidtList === 1">
        <draggable :value="showList" chosenClass="chosen" animation="100" @change="onSortChange">
          <transition-group>
            <div
              v-cloak
              :class="{
                'layer-item': true,
                active: currentLel === element.lel,
                locking: element.isLocking,
                hidden: element.isHidden,
              }"
              v-for="element in showList"
              :key="element.id"
              @click="toHighlight(element.lel)"
            >
              {{ element.label }}
              <span>
                <span v-show="element.isLocking" class="el-icon-lock" @click="toUnlock(element)"></span>
                <span v-show="element.isHidden" class="el-icon-switch-button" @click="toUnhidden(element)"></span>
              </span>
            </div>
          </transition-group>
        </draggable>
      </div>
      <div v-else class="border-wrapper">
        <dv-border-box-10>
          <div class="border-container" @click="getBorder(2)">1号边框</div>
        </dv-border-box-10>
        <div class="border-container none" @click="getBorder(0)">没有边框</div>
      </div>
    </div>
    <!----中间编辑区---->
    <div class="kanban-show-wrapper">
      <vue-draggable-resizable class="kanban-show" draggable @dragging="onMove" :style="viewInfo" />
      <div
        class="kanban-model"
        :style="{
          left: getXCacle(kanbanInfo.top.split('p')[0]) + 'px',
          top: getYCacle(kanbanInfo.left.split('p')[0]) + 'px',
          width: getXCacle(kanbanInfo.width.split('p')[0]) + 'px',
          height: getYCacle(kanbanInfo.height.split('p')[0]) + 'px',
        }"
      ></div>
      <div
        v-for="(item, idx) in showList"
        :key="'a' + idx"
        :style="{
          left: getXCacle(item.x) + 'px',
          top: getYCacle(item.y) + 'px',
          width: getXCacle(item.w) + 'px',
          height: getYCacle(item.h) + 'px',
          'z-index': item.lel,
        }"
        :class="{ showModel: true, active: item.isEditing }"
      />
    </div>
    <div
      class="container"
      ref="container"
      @scroll="(e) => onScroll(e)"
      @click="leaveFoucs"
      @dragover="over"
      @drop="(e) => onDrop(e)"
    >
    
      <!----对标线---->
      <canvas class="canvas" id="canvas" style="width: 100%; height: 100%" />
      <div :style="kanbanWpapperInfo" class="kanban-wrapper" ref="kanban-wrapper">
        <!-- 蒙版 -->
       <div class="mask"></div>
        <div class="kanban" ref="kanban" 
        :style="{
          ...kanbanInfo,
          background: '#efefef',
          'background-image': 
            `linear-gradient(#aaa 1px, transparent 0),
            linear-gradient(90deg, #aaa 1px, transparent 0)`,
            'background-size':` ${getDistance}px ${getDistance}px`
        }"
        ></div>
        <vdr
          class="wrapper"
          v-for="(item, idx) in showList"
          :key="'show' + idx"
          :w="item.w"
          :h="item.h"
          :x="item.x"
          :y="item.y"
          @dragging="onDrag"
          @resizing="onResize"
          @refLineParams="getRefLineParams"
          @click.native.stop
          @click.native="isClickDrag(item, idx)"
          @activated="onActivated(item, idx)"
          @contextmenu.native="!item.isLocking && managementLayer($event, idx, item, item.id)"
          :onDrag="(x, y) => onDragCallback(x, y, item.id)"
          :handles="['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']"
          :grid="[getDistance, getDistance]"
          :style="item.style"
          :snap="true"
          :snap-tolerance="20"
          :z="item.lel"
          v-show="!item.isHidden"
          :draggable="!item.isLocking"
          :resizable="!item.isLocking"
        >
          <!----图表charts---->
          <dv-border-box-10 v-if="item.border === 2">
            <component :is="item.component" :options="item.options" />
          </dv-border-box-10>
          <component v-else :is="item.component" :options="item.options" />
        </vdr>
        <!----基准线---->
        <span
          class="ref-line v-line"
          v-show="item.display"
          v-for="(item, index) in vLine"
          :key="'b' + index"
          :style="{
            left: item.position,
            top: item.origin,
            height: item.lineLength,
          }"
        />
        <span
          class="ref-line h-line"
          v-show="item.display"
          v-for="(item, index) in hLine"
          :key="'a' + index"
          :style="{
            top: item.position,
            left: item.origin,
            width: item.lineLength,
          }"
        />
        <el-button
          show-overflow-tooltip
          class="menu"
          v-if="isRightClick"
          :style="`top:${
            rightMenuY < halfInnerHeight ? rightMenuY : rightMenuY - 50 * menuList.length - 26
          }px; left: ${rightMenuX}px`"
        >
          <div class="menu-item" v-for="(item, index) in menuList" :key="index" @click.stop="item.onMenuClick">
            {{ item.name }}
          </div>
        </el-button>
      </div>
    </div>
    <!-- 右侧编辑信息 -->
    <div class="view-info">
      <editing-list :id="editingId" v-if="isshowEdit"> </editing-list>
      <div v-else class="page-setup">
        <div class="setting">页面设置</div>
        <div class="setting-container">
          <div class="block">
            <span class="demonstration">栅格间距:</span>
            <el-slider v-model="getDistance" :max="400"></el-slider>
            <el-button type="success" @click="zoom('big')" round size="mini">放大</el-button>
            <el-button type="primary" @click="zoom('small')" round size="mini">缩小</el-button>
            <el-button type="info" @click="changPage" round size="mini">预览</el-button>
          </div>
          <!-- <div>栅格间距：<input type="text" v-model="getDistance" /></div> -->
        </div>
      </div>
    </div>
    <el-dialog title="保存文件名" :visible.sync="dialogFormVisible">
      <el-form class="form">
        <el-form-item label="保存文件名">
          <el-input v-model="fileName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancal">取 消</el-button>
        <el-button type="primary" @click="sureSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as api from '@/api'
import * as utils from '@/utils/key-down'
import ConfigList from '@/components/config-list'
import EditingList from '@/components/editing-list'
import MyVideo from '@/components/my-video'
import MyEcharts from '@/components/my-echarts'
import MyText from '@/components/my-text'
import MyMap from '@/components/my-map'
// import Border from '@/components/border'
// import BScroll from 'better-scroll';
import { mapActions, mapMutations, mapState } from 'vuex'
let zIndex = 0
let pType = ''
let cType = ''
let currentId = 0
let currentIndex = -1
let itemData = ''
let that
let scaleNum = 1
// 占盒子x , y 轴的比例
let xCacle
let yCacle
// 滚动的距离
let xDistance = 0
let yDistance = 0
export default {
  data() {
    return {
      kanbanWpapperInfo: {
        width: '100%',
        height: '100%',
        position: 'relative',
        transform: 'scale(1, 1)',
      },
      kanbanInfo: {
        height: '400px',
        width: '711px',
        top: '100px',
        left: '100px',
      },
      viewInfo: {
        width: '177px',
        height: '100px',
        left: '0',
        top: '0',
        // transform: 'scale(1.1, 1.1)',
      },
      //栅格距离
      getDistance: 8,
      //基准线
      vLine: [],
      hLine: [],
      ctx: null,
      // 顶层和底层提示
      tipVisible: false,
      isTopOrBottom: true,
      currentLel: -1,
      isshowEdit: false,
      showEidtList: 0,
      activeNames: ['1'],
      isEditing: false,
      // 右击菜单是否显示
      isRightClick: false,
      // 右击菜单位置
      rightMenuX: 0,
      rightMenuY: 0,
      // 屏幕高度的一半
      halfInnerHeight: 0,
      // 右击菜单列表
      menuList: [
        {
          name: '置顶',
          onMenuClick: this.toTop,
        },
        {
          name: '置底',
          onMenuClick: this.toBottom,
        },
        {
          name: '上移一层',
          onMenuClick: this.moveUp,
        },
        {
          name: '下移一层',
          onMenuClick: this.moveDown,
        },
        {
          name: '锁定',
          onMenuClick: this.toLocking,
        },
        {
          name: '隐藏',
          onMenuClick: this.toHidden,
        },
        {
          name: '复制',
          onMenuClick: this.toCopy,
        },
        {
          name: '删除',
          onMenuClick: this.onDeleteItem,
        },
      ],
      // 侧边图片
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      maxHeight: '', // 最大
      maxWidth: '', // 最大
      activeitem: null,
      fileName: '',
    }
  },
  components: {
    ConfigList,
    EditingList,
    MyVideo,
    MyEcharts,
    MyText,
    MyMap,
  },
  created() {
    if (this.$route.params.obj) {
      this.showList = this.$route.params.obj.config
      this.oldListId = this.$route.params.obj.id
      this.$store.commit('home/GET_OLD_LIST_ID', this.oldListId)
    }
  },
  computed: {
    ...mapState('home', ['list', 'showList', 'oldListId', 'dialogFormVisible']),
    showList: {
      get() {
        return this.$store.state.home.showList
      },
      set(value) {
        this.$store.commit('home/GET_SHOW_LIST', value)
      },
    },
    editingId() {
      if (this.showList.length === 0) {
        return -1
      } else {
        return this.showList.find((item) => item.isEditing === true)
          ? this.showList.find((item) => item.isEditing === true).id
          : -1
      }
    },
    oldListId: {
      get() {
        return this.$store.state.home.oldListId
      },
      set(value) {
        this.$store.commit('home/GET_OLD_LIST_ID', value)
      },
    },
    dialogFormVisible: {
      get() {
        return this.$store.state.home.dialogFormVisible
      },
      set(value) {
        this.$store.commit('home/GET_OLD_LIST_ID', value)
      },
    },
  },
  watch: {
    // 监听input值变化替换:grid[]
    getDistance() {
      this.getDistance < 0 ? (this.getDistance = 8) : this.getDistance
    },
    // 监听关闭菜单的方法
    isRightClick(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    },
    editingId(newVal, oldVal) {
      if (newVal !== -1) {
        this.isshowEdit = false
        setTimeout(() => {
          this.isshowEdit = true
        }, 0)
      }
    },
    showList(val) {
      if (!val.length) {
        this.isshowEdit = false
      }
    },
  },
  
  mounted() {
    document.addEventListener('keydown', this.fn)
    document.addEventListener('keydown', this.myCopy)
    this.$nextTick(() => {
      if (this.$refs.container) {
        const { offsetHeight, offsetWidth } = this.$refs.container
        this.maxHeight = offsetHeight
        this.maxWidth = offsetWidth
      }
    })
    this.$nextTick(() => {
      console.dir(this.$refs.container.clientHeight)
      console.dir(this.$refs.kanban.clientHeight)
      // const
    })

  },
  destroyed() {
    document.removeEventListener('keydown', this.fn)
    document.removeEventListener('keydown', this.myCopy)
  },
  methods: {
    ...mapMutations('home', ['GET_SHOW_LIST', 'GET_INFO', 'IS_VISIABLE', 'SET_OLD_LIST']),
    cancal() {
      this.$store.commit('home/IS_VISIABLE', false)
      //   this.$this.$store.commit('IS_VISIABLE', false);
    },
    async sureSave() {
      //获取当前时间
      let nowDate = new Date().getTime()
      let obj = {
        data: this.showList,
        id: this.oldListId,
        dateTime: nowDate,
        fileName: this.fileName,
      }
      let res = await api.add(obj)
      console.log(11111,res);
      if(res.status === 200) {
        this.$message({
          message:res.message,
          type: 'success'
        });
      }else {
        this.$message({
          message:res.message,
          type: 'error'
        });
      }
      this.oldListId = res.id
      this.$store.commit('home/IS_VISIABLE', false)
      this.$store.commit('home/GET_OLD_LIST_ID', res.id)
    },
    changPage() {
      console.dir(this.$refs.kanban)
      const l = this.$refs.kanban.offsetLeft
      const t = this.$refs.kanban.offsetTop
      const w = this.$refs.kanban.offsetWidth
      const h = this.$refs.kanban.offsetHeight
      const arr = this.showList.map((item) => {
        if (item.x > l && item.x + item.w < l + w && item.y > t && item.y + item.h < t + h) {
          return {
            ...item,
            lScale: (item.x - l) / w,
            tScale: (item.y - t) / h,
            wScale: item.w / w,
            hScale: item.h / h,
          }
        }
      })
      const newArr = arr.filter(item => item)
      console.log(newArr)
      this.GET_INFO(newArr)
      this.$router.push('/view')
    },
    leaveFoucs() {
      this.isshowEdit = false
      const arr = this.showList.map((i) => ({ ...i, isEditing: false }))
      this.GET_SHOW_LIST(arr)
    },
    fn() {
      utils.op()
      utils.keyboardOp(this.activeitem)
    },
    // 基准线
    getRefLineParams(params) {
      const { vLine, hLine } = params
      this.vLine = vLine
      this.hLine = hLine
    },
    // 对标线取值
    onDragCallback(x, y, id) {
      this.x = x
      this.y = y
      this.createCanavas(this.x, this.y)
      const idx = this.showList.findIndex((d) => d.id === id)
      this.showList[idx].x = x
      this.showList[idx].y = y
    },
    // 绘制对标线
    createCanavas(x, y) {
      const canvas = document.getElementById(`canvas`)
      if (canvas.getContext) {
        if (!this.ctx) {
          this.ctx = canvas.getContext('2d') //2d用单引用括起来
        }
        const HEIGHT = this.maxHeight
        const WIDTH = this.maxWidth
        // const fixed = 20 // 修正
        canvas.height = HEIGHT
        canvas.width = WIDTH
        // 设置画笔的颜色和大小
        this.ctx.strokeStyle = 'rgb(0,255,0)' // 画笔的颜色
        this.ctx.lineWidth = 1 // 指定描边线的宽度
        // 开始
        this.clearRect()
        this.ctx.beginPath()
        this.ctx.moveTo(x, y)
        this.ctx.lineTo(0, y)
        this.ctx.stroke()
        this.ctx.closePath()
        // 下一个
        this.ctx.beginPath()
        this.ctx.moveTo(x, y)
        this.ctx.lineTo(x, 0)
        this.ctx.stroke()
        this.ctx.closePath()
      }
    },
    clearRect() {
      this.ctx.clearRect(0, 0, this.maxWidth, this.maxHeight)
    },
    onStart(event, parentType, childType) {
      pType = parentType
      cType = childType
    },
    change() {
      this.showEidtList = !this.showEidtList
    },
    onActivated(item) {
      const arr = this.showList.map((i) => ({ ...i, isEditing: false }))
      arr.find((it) => it.id === item.id).isEditing = true
      this.isshowEdit = true
      this.GET_SHOW_LIST(arr)
      utils.keyboardOp(item)
    },
    //键盘方向键
    keyboardOp(item) {
      utils.keyboardOp(item)
    },
    //复制
    myCopy() {
      if (event.ctrlKey && event.keyCode === 67) {
        let id = this.editingId
        let item = this.showList.find((i) => i.id === id)
        let tmp = this.deepClone(item)
        ;(item.lel = zIndex++), (item.id = currentId++), this.showList.push(tmp)
      }
    },
    // 最新点击chart
    isClickDrag(item, idx) {
      utils.keyboardOp(item)
      currentIndex = idx
      this.currentLel = item.lel
      const maxLel = Math.max(...this.showList.map((item) => item.lel))
      if (maxLel === itemData.lel) {
        return
      }
      this.allMenuEvent('toTop')
      this.activeitem = item
      
    },
    onDrop(event) {
      this.isRightClick = false
      event.preventDefault()
      event.stopPropagation()
      console.log(event.offsetY, event.offsetX)
      const item = this.list.find((item) => item.type === pType).children.find((subItem) => subItem.type === cType)
      const b = this.deepClone(item)
      console.log(b)
      const y = event.clientY - b.h / 2 + yDistance
      const x = event.clientX - b.w / 2 - 200 + xDistance
      // 更改store里的数据
      const tempArr = this.showList.map((i) => ({ ...i, isEditing: false }))
      let aaa = {
        ...b,
        //元素放下位置取整与网格线对齐
        x: Math.round(x / this.getDistance) * this.getDistance,
        y: Math.round(y / this.getDistance) * this.getDistance,
        lel: zIndex++,
        id: currentId++,
        isEditing: true,
        isHidden: false,
        isLocking: false,
      }
      this.toHighlight(aaa.lel)
      tempArr.unshift(aaa)
      // utils.keyboardOp(item)
      this.isshowEdit = true
      this.GET_SHOW_LIST(tempArr)
      // 右侧数据 todo
    },
    over(e) {
      e.preventDefault()
      e.dataTransfer.dropEffect = 'copy'
    },
    onResize(x, y, w, h) {
      // const arr = this.deepClone(this.showList)
      const arr = this.showList.concat()
      const a = arr.find((item) => item.id === this.editingId)
      console.log(a)
      if (!a) {
        return
      }
      ;(a.x = x), (a.y = y), (a.w = w), (a.h = h), this.GET_SHOW_LIST(arr)
    },
    end() {
      const arr = this.deepClone(this.showList)
      const a = arr.find((item) => item.id === this.editingId)
      if (!a) {
        return
      }
      ;(a.x = this.x), (a.y = this.y), this.GET_SHOW_LIST(arr)
    },
    onDrag(x, y) {
      this.x = x
      this.y = y
      this.createCanavas(x, y)
    },
    deepClone(x) {
      const res = new x.constructor()
      for (const key in x) {
        // key: 对象中的属性名  数组中的索引
        const value = x[key] // 属性值
        if (value instanceof Object) {
          res[key] = this.deepClone(value)
        } else {
          res[key] = value
        }
      }
      return res
    },
    // 点击鼠标右键出现右边菜单
    managementLayer(e, index, item) {
      itemData = item
      e.preventDefault()
      e.stopPropagation()
      const arr = this.showList.map((i) => ({ ...i, isEditing: false }))
      arr[index].isEditing = true
      this.GET_SHOW_LIST(arr)
      currentIndex = index
      this.isRightClick = true
      this.rightMenuX = e.clientX - 200
      this.rightMenuY = e.clientY
      this.halfInnerHeight = window.innerHeight / 2
    },
    // 关闭右击菜单
    closeMenu() {
      this.isRightClick = false
    },
    // 置顶置底上移下移删除复制函数
    allMenuEvent(key) {
      const newList = this.showList.concat()
      switch (key) {
        case 'toTop':
          const temp = newList.splice(currentIndex, 1)[0]
          // unshift到数组第一项
          newList.unshift(temp)
          break
        case 'toBottom':
          // 将要置顶的元素存储后删除
          const newTemp = newList.splice(currentIndex, 1)[0]
          // push到数组最后一项
          newList.push(newTemp)
          break
        case 'moveUp':
          // 交换数组项
          this.handleChangeOrder(newList, currentIndex, currentIndex - 1)
          break
        case 'moveDown':
          // 交换数组项
          this.handleChangeOrder(newList, currentIndex + 1, currentIndex)
          break
        case 'toCopy':
          // 复制
          newList.unshift({
            ...itemData,
            x: itemData.x + 8,
            y: itemData.y + 8,
            lel: zIndex++,
            id: currentId++,
          })
          break
        case 'onDeleteItem':
          // 删除
          newList.splice(currentIndex, 1)
          break
        default:
          break
      }
      // 将数组重新排序
      this.GET_SHOW_LIST(
        newList.map((d, i) => {
          return {
            ...d,
            lel: newList.length - i - 1,
          }
        })
      )
      this.closeMenu()
    },
    // 顶层提示
    topTip() {
      const maxLel = Math.max(...this.showList.map((item) => item.lel))
      if (maxLel === itemData.lel) {
        this.highTip()
        return
      }
    },
    highTip() {
      this.$message({
        message: '已经是最顶层了',
        type: 'warning',
      })
    },
    lowTip() {
      this.$message({
        message: '已经是最底层了',
        type: 'warning',
      })
    },
    // 底层提示
    bottomTip() {
      const minLel = Math.min(...this.showList.map((item) => item.lel))
      if (minLel === itemData.lel) {
        this.lowTip()
        return
      }
    },
    // 置顶
    toTop() {
      this.topTip()
      this.allMenuEvent('toTop')
    },
    // 置底
    toBottom() {
      this.bottomTip()
      this.allMenuEvent('toBottom')
    },
    // 复制一项
    toCopy() {
      this.allMenuEvent('toCopy')
    },
    // 删除当前项
    onDeleteItem() {
      this.allMenuEvent('onDeleteItem')
      this.isshowEdit = false
      const arr = this.showList.map((i) => ({ ...i, isEditing: false }))
      this.GET_SHOW_LIST(arr)
      console.log(this.editingId)
      console.log(this.showList)
    },
    // 调整顺序，arr 数组，indexAdd 添加元素的位置，indexDel 删除元素的位置（indexAdd与indexDel交换位置后重新排序）
    handleChangeOrder(arr, indexAdd, indexDel) {
      arr[indexAdd] = arr.splice(indexDel, 1, arr[indexAdd])[0]
      return arr
    },
    // 上移一层
    moveUp() {
      const maxLel = Math.max(...this.showList.map((item) => item.lel))
      if (maxLel === itemData.lel) {
        this.highTip()
        return
      }
      this.allMenuEvent('moveUp')
    },
    // 下移一层
    moveDown() {
      const minLel = Math.min(...this.showList.map((item) => item.lel))
      if (minLel === itemData.lel) {
        this.lowTip()
        return
      }
      this.allMenuEvent('moveDown')
    },
    //拖拽排序事件
    onSortChange({ moved }) {
      const newList = this.showList.concat()
      newList.splice(moved.oldIndex, 1)
      newList.splice(moved.newIndex, 0, moved.element)
      this.GET_SHOW_LIST(
        newList.map((d, i) => {
          return {
            ...d,
            lel: newList.length - i - 1,
          }
        })
      )
    },
    // 锁定
    toLocking() {
      const newList = this.showList.concat()
      newList.find((item) => item.id === itemData.id).isLocking = true
      this.GET_SHOW_LIST(newList)
      this.closeMenu()
    },
    // 解除锁定
    toUnlock(element) {
      const newList = this.showList.concat()
      newList.find((item) => item.id === element.id).isLocking = false
      this.GET_SHOW_LIST(newList)
    },
    // 隐藏
    toHidden() {
      const newList = this.showList.concat()
      newList.find((item) => item.id === itemData.id).isHidden = true
      this.GET_SHOW_LIST(newList)
      this.closeMenu()
    },
    // 解除隐藏
    toUnhidden(element) {
      const newList = this.showList.concat()
      newList.find((item) => item.id === element.id).isHidden = false
      this.GET_SHOW_LIST(newList)
    },
    // 高亮
    toHighlight(lel) {
      this.currentLel = lel
    },
    // tab切换
    changeOption(idx) {
      this.showEidtList = idx
    },
    getBorder(type) {
      console.log(this.editingId)
      if (this.editingId === -1) {
        return
      }
      const arr = this.showList.concat()
      const a = arr.find((item) => item.id === this.editingId)
      a.border = type
      console.log(arr)
      this.GET_SHOW_LIST(arr)
      console.log(this.showList)
    },
    zoom(val) {
      if (val === 'big' && scaleNum < 2) {
        scaleNum += 0.1
      } else if (val === 'small' && scaleNum > 1) {
        scaleNum -= 0.1
      }
      this.kanbanWpapperInfo.transform = `scale(${scaleNum}, ${scaleNum})`
      this.viewInfo.width = 177 / scaleNum + 'px'
      this.viewInfo.height = 100 / scaleNum + 'px'
    },
    onScroll(e) {
      xDistance = e.target.scrollLeft
      yDistance = e.target.scrollTop
    },
    onMove(x, y) {
      if (x <= 0 || y <= 0) {
        return
      }
      const xLength = this.$refs.container.offsetWidth
      const yLength = this.$refs.container.offsetHeight
      console.log(xLength, xLength)
      const viewWidth = this.viewInfo.width.split('p')[0]
      const viewHeight = this.viewInfo.height.split('p')[0]
      console.log(viewWidth, viewHeight)
      xCacle = (177 - viewWidth) / x
      yCacle = (100 - viewHeight) / y
      this.$refs.container.scrollLeft = xLength / xCacle
      this.$refs.container.scrollTop = yLength / yCacle
    },

    getXCacle(num) {
      if (!this.$refs['kanban-wrapper']) {
        return
      }
      return (177 / this.$refs['kanban-wrapper'].offsetWidth) * num
    },
    getYCacle(num) {
      if (!this.$refs['kanban-wrapper']) {
        return
      }
      return (100 / this.$refs['kanban-wrapper'].offsetHeight) * num
    },
  },
}
</script>

<style scoped>
#app {
  display: flex;
  height: 100vh;
}
::v-deep .el-dialog{
  width: 300px;
}
.options-wrapper {
  width: 200px;
  height: 100vh;
}

.options-wrapper .options {
  display: flex;
  font-size: 14px;
}
.options-wrapper .layer-option {
  border-right: 1px solid #eee;
  block-size: border;
}
.options-wrapper .option {
  width: 66px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.option.active {
  color: #fff;
  background-color: #546fc6;
}
.border-wrapper {
  border-top: 1px solid #aaa;
}
.sider {
  width: 200px;
  height: calc(100% - 40px);
  border-top: 1px solid #999;
  box-sizing: border-box;
}
.container-wrapper {
  overflow-x: auto;
  flex: 1;
}
.container {
  flex: 1;
  /* width: 100%; */
  /* height: calc(100% - 100px); */
  /* width: 1147px; */
  outline: 1px solid #959595;
  position: relative;
  overflow-y: auto;
  overflow-x: auto;
  box-sizing: border-box;
 
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -999999999;
   background: rgba(152, 146, 146);
    background-image: 
        linear-gradient(rgba(152, 146, 146) 14px, transparent 0),
        linear-gradient(90deg, white 1px, transparent 0);
    background-size: 15px 15px, 15px 15px;
}
.canvas {
  position: absolute;
}
.item {
  outline: 1px solid red;
}
.img-wrapper {
  flex: 1;
  padding: 16px 0;
  box-sizing: border-box;
  overflow: hidden;
  outline: 1px solid red;
}
.img-wrapper > img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.view-wrapper {
  position: absolute;
}
.view {
  width: 100%;
  height: 100%;
}
/* .active {
  outline: 2px solid red;
} */
.view-info {
  width: 250px;
  height: 100%;
  overflow: hidden;
}
.wrapper {
  width: 200px;
  height: 300px;
}
.wrapper.active {
  border: 1px solid #333;
  box-sizing: border-box;
}
/* 右击菜单开始 */
.menu {
  width: 200px;
  background-color: rgb(255, 255, 255);
  position: fixed;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
  z-index: 3000;
  position: absolute;
}
.menu-item {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: rgb(75, 71, 94);
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  padding: 0 8px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
}
.menu .tip {
  width: 200px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  position: fixed;
  top: 15%;
  right: 20%;
  color: #fff;
  background-color: #546fc6;
}
/* 右击菜单结束 */
/* .label {
  display: flex;
  align-items: center;
} */
.label {
  height: 50px;
  width: 100%;
  overflow: hidden;
  outline: 1px solid red;
}
.label > img {
  width: 50px;
  height: 30px;
}
.layer {
  width: 100%;
  border-left: 1px solid #999;
  border-top: 1px solid #999;
  box-sizing: border-box;
}
/* 左边图层管理开始 */
.layer .layer-item {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  box-sizing: border-box;
}
.layer .layer-item.active {
  background-color: #546fc6;
  color: #fff;
}
.layer .layer-item.locking,
.layer .layer-item.hidden {
  color: #999;
}
.layer .layer-item span {
  width: 60px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.layer-item:nth-child(1) {
  margin: 0;
}
.layer .layer-icon {
  text-align: center;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  box-sizing: border-box;
}
/*选中样式*/
.layer .chosen {
  border: solid 2px #546fc6;
  box-sizing: border-box;
}
/* 左边图层管理结束 */
.content {
  width: 100%;
  height: 100%;
}
.text-wrapper {
  text-align: center;
}
.border-container {
  width: 200px;
  height: 150px;
  margin-top: 8px;
  box-sizing: border-box;
}
.none.border-container {
  border: 1px solid #aaa;
}
.view-info .title {
  text-align: center;
  background-color: blue;
  height: 40px;
  line-height: 40px;
}
.kanban-wrapper {
  transform-origin: top left;
}
.kanban {
  position: absolute;
  z-index: -99;
  /* transform: translate(-50%, -50%); */
  /* transition: all .5s; */
  transform-origin: top left;
}
.kanban-show-wrapper {
  position: absolute;
  left: 220px;
  bottom: 20px;
  width: 177px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999999;
}
.kanban-show {
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: top left;
  outline: 1px solid red;
  z-index: 5555;
}
.kanban-model {
  background-color: #aaa;
  position: absolute;
  /* transform: translate(-50%, -50%); */
}
.showModel {
  position: absolute;
  background-color: #bbb;
}
.showModel.active {
  background-color: rgba(255, 255, 255, 0.8);
  outline: 1px solid red;
}
.container::-webkit-scrollbar {
  display: none;
}
/* .border-container {
  width: 200px;
  height: 150px;
  margin-top: 8px;
  box-sizing: border-box;
}
.none.border-container {
  border: 1px solid #aaa;
}
.view-info .title {
  text-align: center;
  background-color: blue;
  height: 40px;
  line-height: 40px;
}
.kanban-wrapper {
  transform-origin: top left;
}
.kanban {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -9999;
  /* transition: all .5s; */
  /* transform-origin: top left;
}
.kanban-show-wrapper {
  position: absolute;
  right: 300px;
  bottom: 50px;
  width: 177px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999999;
}
.kanban-show {
  position: absolute;
  right: 0;
  bottom: 0;
  outline: 1px solid red;
}
.showModel {
  position: absolute;
  background-color: #ddd;
}
.container::-webkit-scrollbar {
  display: none;
} */
/* .border-container {
  width: 200px;
  height: 150px;
  margin-top: 8px;
  box-sizing: border-box;
} */
/* .none.border-container {
  border: 1px solid #aaa;
} */
/* .view-info .title {
  text-align: center;
  background-color: #546fc6;
  height: 40px;
  line-height: 40px;
} */ 

.setting-container {
  padding: 0px 12px 0 12px;
}
.setting {
  text-align: center;
  background-color: #546fc6;
  height: 40px;
  line-height: 40px;
  color: #fff;
}
.page-setup .block {
  margin-top: 12px;
}
</style>
